<template>
    <div class="outDiv">
        <table>
            <tbody>
                <tr>
                    <td>
                        个人姓名:
                    </td>
                    <td>
                        <input type="text" placeholder="请输入姓名" v-model="uName">
                    </td>
                </tr>
                <tr>
                    <td>
                        用&nbsp;户&nbsp;名：
                    </td>
                    <td>
                        <input type="text" placeholder="请输入用户名" v-model="uAccount">
                    </td>
                </tr>
                <tr>
                    <td>
                        密&nbsp;&nbsp;&nbsp;&nbsp;码:
                    </td>
                    <td>
                        <input type="password" placeholder="请输入密码" v-model="uPwd">
                    </td>
                </tr>
                <tr>
                    <td>
                        确认密码:
                    </td>
                    <td>
                        <input type="password" placeholder="请再次输入密码" v-model="againPwd">
                    </td>
                </tr>
                <tr>
                    <td><input type="button" value="确认" @click="btnYes"></td>
                    <td><input type="button" value="返回" @click="btnNo"></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script setup>
// == 引入相关依赖-开始 ==
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { url } from './router';
// == 引入相关依赖-结束 ==
// == 定义相关变量-开始 ==
let uAccount = ref('')
let uName = ref('')
let uPwd = ref('')
let againPwd = ref('')
let router = useRouter()
function btnYes() {
    let registerAccount = uAccount.value
    // 验证用户名是否已经被创建
    fetch(`${url}/admin/${registerAccount}`).then(res => {
        console.log(res);
        if (res.status === 404) {
            alert('该用户名已被注册')
            return
        } else {
            // 空值检测 排空
            if (uAccount.value != '' && uName.value != '' && uPwd.value != '' && againPwd.value != '') {
                if (uPwd.value !== againPwd.value) {
                    alert('前两次输入的密码不一致,请重试')
                    return
                } else {
                    let tmpObj = {
                        uname: uName.value,
                        account: uAccount.value,
                        password: uPwd.value
                    }
                    fetch(`${url}/admin`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(tmpObj)
                    }).then(res => {
                        if (res.ok) {
                            alert('创建成功^_^')
                            router.push('/')
                        }
                    }).catch(err => {
                        console.log(err);
                    })
                }
            } else {
                if (uName.value === '') {
                    alert('个人姓名不能为空')
                } else if (uAccount.value === '') {
                    alert('用户名不能为空')
                }
                else if (uPwd.value === '') {
                    alert('用户密码不能为空')
                } else {
                    alert('确认密码不能为空')
                }
            }
        }
    })

}

function btnNo() {
    router.push('/')
}
// == 定义相关变量-结束 ==
</script>
<style scoped>
.outDiv {
    width: 100%;
    height: 100vh;
    background-color: aliceblue;
    display: flex;
    justify-content: center;
    align-items: center;
}

table {
    border: 2px solid black;
    padding: 20px;
    box-shadow: 3px 3px #00b9ff96;
    height: 160px;
}

input[type=button] {
    box-shadow: 1px 1px blue;
    text-align: center;
    height: 27px;
    border-radius: 4px;
    font-family: cursive;
    background-color: #f0fffdf5;
    width: 50px;
}

input {
    outline: none;
}
</style>